<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由简单用法</title>
</head>
<style>
    span{
        cursor: pointer;
    }
    .active{
        background-color:pink;
    }
</style>
<body>
    <!-- 前端路由：页面跳转的URL规则匹配由前端来控制，没跳转到不同的URL都是使用前端的锚点路由 -->
    <!-- 路由的两种模式：1.Hash模式：优点是兼容性高。缺点是URL带有#好不好看   
                        2.History模式：优点是不带#号，缺点是需要浏览器支持Hash模式 -->

    <!-- 路由可以后退和前进  访问记录 -->

     <div id="app">
         <!-- router-link 就像是之前页面中的a标签  当我们出发这个链接时会告诉浏览器路径变成什么 -->
         <!-- to:路径变了之后根据路由规则告诉router-link 去加载这个组件 -->
         <!-- 有两种跳转的方法 1.to  2.绑定to用对象name属性 -->
         <router-link  to="/login" tag="span">登录</router-link>
         <router-link  :to="{name:'/resign'}" tag="span">注册</router-link>

         <!-- 编程式导航 -->
         
             <button @click="goToResign">编程式导航</button>
         


         <!-- 定义容器   我们写的路由里面的内容在这里显示-->
         <router-view></router-view>
     </div>
</body>
<script src='../../vue文件/vue.js '></script>
<!-- vue-router是vue。js官方的路由管理器  必须写在vue.js下面 -->
<script src="../../vue文件/vue-router.js"></script>
<script>

    var login = {
        template:"<h1>这是登录组件</h1>"
    }

    var resign = {
        template:"<h1>这是注册组件</h1>"
    }
    
    var bian = {
        template:"<h1>这是编程式导航</h1>"
    }


    // 定义路由规则 new VueRouter({routes:[path component]})
    var routerObj = new VueRouter({
        routes: [
            {path:"/login",name:"/login",component:login},
            {path:"/resign",name:"/resign",component:resign},
            {path:"/bian",name:"/bian",component:bian}
        ],
        // 定义被激活的router-link样式  引入css类名
        linkActiveClass:"active",
    })

    let vm = new Vue({
        el: '#app',
        data: {},
        // 在VUE 实例中引入路由规则
        router:routerObj,
        methods: {
            goToResign(){
                // 点击编程式导航按钮的时候出发goToResign方法
                this.$router.push("/bian");
                // this.$router.push({name:"/bian"});
                // 编程式导航使用$router对象下的push方法进行路由跳转，可以通过path定义跳转路径，也可以通过name属性定义路由进行跳转
            }
        },
    })
</script>
</html>